<div id="pma_console_container" class="d-print-none">
  <div id="pma_console"
       data-start-history="{{ settings.StartHistory ? 'true' : 'false' }}"
       data-always-expand="{{ settings.AlwaysExpand ? 'true' : 'false' }}"
       data-current-query="{{ settings.CurrentQuery ? 'true' : 'false' }}"
       data-enter-executes="{{ settings.EnterExecutes ? 'true' : 'false' }}"
       data-dark-theme="{{ settings.DarkTheme ? 'true' : 'false' }}"
       data-mode="{{ settings.Mode }}"
       data-height="{{ settings.Height }}"
       data-group-queries="{{ settings.GroupQueries ? 'true' : 'false' }}"
       data-order-by="{{ settings.OrderBy }}"
       data-order="{{ settings.Order }}">
    <div class="toolbar collapsed">
      <div class="switch_button console_switch">
        {{ get_image('console', t('SQL Query Console')) }}
        <span>{{ t('Console') }}</span>
      </div>
      <div class="button clear">
        <span>{{ t('Clear') }}</span>
      </div>
      <div class="button history">
        <span>{{ t('History') }}</span>
      </div>
      <div class="button options">
        <span>{{ t('Options') }}</span>
      </div>
      {% if has_bookmark_feature %}
        <div class="button bookmarks">
          <span>{{ t('Bookmarks') }}</span>
        </div>
      {% endif %}
      {% if debug %}
        <div class="button debug hide">
          <span>{{ t('Debug SQL') }}</span>
        </div>
      {% endif %}
    </div>

    {# Console messages #}
    <div class="content{{ settings.DarkTheme ? ' console_dark_theme' }}">
      <div class="console_message_container">
        <div class="message welcome">
          <span id="instructions-0">{{ t('Press Ctrl+Enter to execute query') }}</span>
          <span class="hide" id="instructions-1">{{ t('Press Enter to execute query') }}</span>
        </div>
        {% if sql_history is not empty %}
          {% for record in sql_history|reverse %}
            <div class="message history collapsed hide{{ record['sqlquery'] matches '@^SELECT[[:space:]]+@i' ? ' select' }}" targetdb="{{ record['db'] }}" targettable="{{ record['table'] }}">
              <div class="action_content">
                <span class="action collapse">{{ t('Collapse') }}</span>
                <span class="action expand">{{ t('Expand') }}</span>
                <span class="action requery">{{ t('Requery') }}</span>
                <span class="action edit">{{ t('Edit') }}</span>
                <span class="action explain">{{ t('Explain') }}</span>
                <span class="action profiling">{{ t('Profiling') }}</span>
                {% if has_bookmark_feature %}
                  <span class="action bookmark">{{ t('Bookmark') }}</span>
                {% endif %}
                <span class="text failed">{{ t('Query failed') }}</span>
                <span class="text targetdb">{{ t('Database') }}: <span>{{ record['db'] }}</span></span>
                <span class="text query_time">{{ t('Queried time') }}: <span>{{ record['timevalue'] is defined ? record['timevalue'] : t('During current session') }}</span></span>
              </div>

              <span class="query">{{ record['sqlquery'] }}</span>
            </div>
          {% endfor %}
        {% endif %}
      </div><!-- console_message_container -->
      <div class="query_input">
        <span class="console_query_input"></span>
      </div>
    </div><!-- message end -->
    {# Drak the console with other cards over it #}
    <div class="mid_layer"></div>
    {# Debug SQL card #}
    <div class="card" id="debug_console">
      <div class="toolbar">
        <div class="button order order_asc">
          <span>{{ t('ascending') }}</span>
        </div>
        <div class="button order order_desc">
          <span>{{ t('descending') }}</span>
        </div>
        <div class="text">
          <span>{{ t('Order:') }}</span>
        </div>
        <div class="switch_button">
          <span>{{ t('Debug SQL') }}</span>
        </div>
        <div class="button order_by sort_count">
          <span>{{ t('Count') }}</span>
        </div>
        <div class="button order_by sort_exec">
          <span>{{ t('Execution order') }}</span>
        </div>
        <div class="button order_by sort_time">
          <span>{{ t('Time taken') }}</span>
        </div>
        <div class="text">
          <span>{{ t('Order by:') }}</span>
        </div>
        <div class="button group_queries">
          <span>{{ t('Group queries') }}</span>
        </div>
        <div class="button ungroup_queries">
          <span>{{ t('Ungroup queries') }}</span>
        </div>
      </div>

      <div class="content debug">
        <div class="message welcome"></div>
        <div class="debugLog"></div>
      </div> <!-- Content -->
      <div class="templates">
        <div class="debug_query action_content">
          <span class="action collapse">{{ t('Collapse') }}</span>
          <span class="action expand">{{ t('Expand') }}</span>
          <span class="action dbg_show_trace">{{ t('Show trace') }}</span>
          <span class="action dbg_hide_trace">{{ t('Hide trace') }}</span>
          <span class="text count hide">{{ t('Count:') }} <span></span></span>
          <span class="text time">{{ t('Time taken:') }} <span></span></span>
        </div>

      </div> <!-- Template -->
    </div> <!-- Debug SQL card -->
    {% if has_bookmark_feature %}
      <div class="card" id="pma_bookmarks">
        <div class="toolbar">
          <div class="switch_button">
            <span>{{ t('Bookmarks') }}</span>
          </div>
          <div class="button refresh">
            <span>{{ t('Refresh') }}</span>
          </div>
          <div class="button add">
            <span>{{ t('Add') }}</span>
          </div>
        </div>

        <div class="content bookmark">
          {{ bookmark_content|raw }}
        </div>
        <div class="mid_layer"></div>
        <div class="card add">
          <div class="toolbar">
            <div class="switch_button">
              <span>{{ t('Add bookmark') }}</span>
            </div>
          </div>

          <div class="content add_bookmark">
            <div class="options">
              <label>
                {{ t('Label') }}: <input type="text" name="label">
              </label>
              <label>
                {{ t('Target database') }}: <input type="text" name="targetdb">
              </label>
              <label>
                <input type="checkbox" name="shared">{{ t('Share this bookmark') }}
              </label>
              <button class="btn btn-primary" type="submit" name="submit">{{ t('OK') }}</button>
            </div> <!-- options -->
            <div class="query_input">
              <span class="bookmark_add_input"></span>
            </div>
          </div>
        </div> <!-- Add bookmark card -->
      </div> <!-- Bookmarks card -->
    {% endif %}
    {# Options card #}
    <div class="card" id="pma_console_options">
      <div class="toolbar">
        <div class="switch_button">
          <span>{{ t('Options') }}</span>
        </div>
        <div class="button default">
          <span>{{ t('Restore default values') }}</span>
        </div>
      </div>

      <div class="content">
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="consoleOptionsAlwaysExpandCheckbox" name="always_expand"{{ settings.AlwaysExpand ? ' checked' }}>
          <label class="form-check-label" for="consoleOptionsAlwaysExpandCheckbox">{{ t('Always expand query messages') }}</label>
        </div>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="consoleOptionsStartHistoryCheckbox" name="start_history"{{ settings.StartHistory ? ' checked' }}>
          <label class="form-check-label" for="consoleOptionsStartHistoryCheckbox">{{ t('Show query history at start') }}</label>
        </div>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="consoleOptionsCurrentQueryCheckbox" name="current_query"{{ settings.CurrentQuery ? ' checked' }}>
          <label class="form-check-label" for="consoleOptionsCurrentQueryCheckbox">{{ t('Show current browsing query') }}</label>
        </div>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="consoleOptionsEnterExecutesCheckbox" name="enter_executes"{{ settings.EnterExecutes ? ' checked' }}>
          <label class="form-check-label" for="consoleOptionsEnterExecutesCheckbox">{{ t('Execute queries on Enter and insert new line with Shift+Enter. To make this permanent, view settings.') }}</label>
        </div>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="consoleOptionsDarkThemeCheckbox" name="dark_theme"{{ settings.DarkTheme ? ' checked' }}>
          <label class="form-check-label" for="consoleOptionsDarkThemeCheckbox">{{ t('Switch to dark theme') }}</label>
        </div>
      </div>
    </div> <!-- Options card -->
    <div class="templates">
      {# Templates for console message actions #}
      <div class="query_actions">
        <span class="action collapse">{{ t('Collapse') }}</span>
        <span class="action expand">{{ t('Expand') }}</span>
        <span class="action requery">{{ t('Requery') }}</span>
        <span class="action edit">{{ t('Edit') }}</span>
        <span class="action explain">{{ t('Explain') }}</span>
        <span class="action profiling">{{ t('Profiling') }}</span>
        {% if has_bookmark_feature %}
          <span class="action bookmark">{{ t('Bookmark') }}</span>
        {% endif %}
        <span class="text failed">{{ t('Query failed') }}</span>
        <span class="text targetdb">{{ t('Database') }}: <span></span></span>
        <span class="text query_time">{{ t('Queried time') }}: <span></span></span>
      </div>
    </div>
  </div> <!-- #console end -->
</div> <!-- #console_container end -->
